<template>
  <div class="tab_component">
    tab_component组件
    <div class="tabs">
      <button v-for="(item, index) in tabs" :key="item + index"
      :class="{active: item === tabsC}"
      @click="clickHandler(item)">
        {{item}}
      </button>
    </div>
    <!-- <home></home> -->
    <keep-alive>
      <component :is="tabsC"></component>
    </keep-alive>
  </div>
</template>
<script>
import Home from './com/home'
import About from './com/about.vue'
import Cate from './com/Categroy.vue'
export default {
  components: {
    Home,
    About,
    Cate
  },
  data () {
    return {
      tabs: ['home', 'about', 'cate'],
      tabsC: 'home'
    }
  },
  methods: {
    clickHandler (item) {
      this.tabsC = item
    }
  }
}
</script>
<style scoped>
.active {
  color: red;
}
</style>
